<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item>
        <el-select
          v-model="searchWords.publishState"
          clearable
          placeholder="状态"
          style="width: 100px"
        >
          <el-option
            v-for="item in publishStateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchWords.videoTypeId"
          clearable
          placeholder="类型"
          style="width: 100px"
        >
          <el-option
            v-for="item in videoTypeList"
            :key="item.id"
            :label="item.typeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchWords.isTop"
          clearable
          placeholder="置顶"
          style="width: 100px"
        >
          <el-option value="1" label="是" />
          <el-option value="2" label="否" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          placeholder="标题"
          v-model="searchWords.videoName"
          style="width: 110px"
        />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" @click="initList(1)" />
        <el-button type="primary" @click="addO" plain style="margin-left: 5px">
          + 新增
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        ref="tableRef"
        height="100%"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        <template #publishState="{ row }">
          {{
            getTranslate(publishStateList, "value", row.publishState, "label")
          }}
        </template>
        <template #publishDate="{ row }">
          {{ row.publishDate ? row.publishDate : "-" }}
        </template>
        <template #isTop="{ row }">
          <el-switch
            v-model="row.isTop"
            size="small"
            active-text="是"
            inactive-text="否"
            active-value="1"
            inactive-value="2"
            :before-change="() => beforeChange(row)"
          />
        </template>
        <template #operation="{ row }">
          <el-button
            :icon="Edit"
            plain
            size="small"
            type="primary"
            @click="edit(row, false)"
          >
            编辑
          </el-button>
          <el-button
            v-if="row.publishState != 2"
            :icon="Position"
            plain
            size="small"
            type="warning"
            @click="getRelease(row)"
          >
            发布
          </el-button>
          <el-button
            v-if="row.publishState == 2"
            :icon="RefreshLeft"
            plain
            size="small"
            type="warning"
            @click="getWithdrawVideo(row)"
          >
            撤回
          </el-button>
          <el-button
            v-if="row.publishState == 2"
            :icon="View"
            plain
            size="small"
            type="success"
            @click="edit(row, true)"
          >
            详情
          </el-button>
          <el-button
            v-if="row.publishState != 2"
            :icon="Delete"
            type="danger"
            size="small"
            plain
            @click="del(row)"
          >
            删除
          </el-button>
        </template>
      </Table>
    </div>
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />
    <EditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      v-model:isDisabled="isDisabled"
      :parent-menu-option="tableData.data"
      @submit="initList"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";
import EditForm from "./components/EditForm.vue";
import {
  Delete,
  Edit,
  Search,
  RefreshLeft,
  Position,
  View,
} from "@element-plus/icons-vue";
import Page from "@/components/pageTable/Page.vue";
import {
  deleteVideo,
  pageVideo,
  publishVideo,
  selectVideoList,
  topVideo,
  withdrawVideo,
} from "@/api/videoManage.ts";
import { getTranslate } from "@/util";

let rowData: any;
let filterData = reactive({ name: "" });
const editFormVisible = ref<boolean>(false);
const tableRef = ref();
const isDisabled = ref<boolean>(false);
const videoTypeList = ref<any[]>([]);
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});
const publishStateList = [
  { value: "1", label: "待发布" },
  { value: "2", label: "已发布" },
  { value: "3", label: "撤回" },
];
const searchWords = reactive({
  videoTypeId: "",
  videoName: "",
  isTop: "",
  publishState: "",
});
const tableData = reactive({
  columns: [
    { label: "状态", prop: "publishState", width: 80, template: true },
    { label: "标题", prop: "videoName", width: 280 },
    { label: "分类", prop: "typeName", width: 150 },
    { label: "置顶(最多3个)", prop: "isTop", width: 120, template: true },
    { label: "发布/撤回时间", prop: "publishDate", width: 170, template: true },
    {
      label: "操作",
      prop: "operation",
      template: true,
      align: "left",
      width: 240,
    },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function initList(page: number) {
  pageData.pageNum = page || 1;
  let params = {
    pageNum: pageData.pageNum || 1,
    pageSize: pageData.pageSize,
    ...searchWords,
  };
  tableData.loading = true;
  const { data, msg, success } = await pageVideo(params);
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data?.list;
  tableData.total = data?.total;
}

async function edit(row: any, bl: boolean) {
  rowData = { ...row, videoTypeIds: row.videoTypeId.split(",") };
  isDisabled.value = bl;
  editFormVisible.value = true;
}

async function addO() {
  isDisabled.value = false;
  editFormVisible.value = true;
}
function beforeChange(row: any) {
  return new Promise((resolve) => {
    ElMessageBox.confirm(
      `是否${row?.isTop == "1" ? "取消置顶" : "置顶"}?`,
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(async () => {
      const { success, msg } = await topVideo({
        id: row?.id,
        isTop: row?.isTop == 1 ? "2" : "1",
      });
      if (!success) {
        ElMessage.error(msg);
        return;
      }
      resolve(true);
      ElMessage.success("操作成功");
      await initList(1);
    });
  });
}

async function del(row: any) {
  ElMessageBox.confirm(`是否删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { success, msg } = await deleteVideo(row?.id);
    if (!success) {
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await initList(1);
  });
}

async function getRelease(row: any) {
  ElMessageBox.confirm(`是否确认发布视频?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { success, msg } = await publishVideo({ id: row?.id });
    if (!success) {
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await initList(1);
  });
}

async function getWithdrawVideo(row: any) {
  ElMessageBox.confirm(`是否确认撤回?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { success, msg } = await withdrawVideo({ id: row?.id });
    if (!success) {
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await initList(1);
  });
}

async function getSelectVideoList() {
  const { success, msg, data } = await selectVideoList();
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  videoTypeList.value = data;
}

onMounted(async () => {
  await initList(pageData.pageNum);
  await getSelectVideoList();
});

watch(pageData, async () => {
  await initList(pageData.pageNum);
});
watch(searchWords, async () => {
  await initList(1);
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
</style>
